<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
        
        .box {
            position: relative;
            margin: 200px 0 0 200px;
            width: 450px;
            height: 450px;
            border: 1px solid #ccc;
        }
        
        .img_box ul {
            width: 450px;
            height: 450px;
        }
        
        .img_box li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .img_box li img {
            width: 100%;
        }
        
        .imgActive {
            z-index: 2;
        }
        
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
            background-color: yellow;
            opacity: .3;
            cursor: move;
            /* display: none; */
            z-index: 3;
        }
        
        .big_img {
            position: absolute;
            top: 0;
            left: 460px;
            border: 1px solid #ccc;
            overflow: hidden;
            /* display: none; */
        }
        
        .big_img ul {
            position: relative;
            width: 500px;
            height: 500px;
        }
        
        .big_img ul li {
            position: absolute;
            left: 0;
            top: 0;
            width: 800px;
            height: 800px;
        }
        
        .big_img img {
            width: 100%;
        }
        
        .small_img {
            margin-left: 200px;
            width: 450px;
        }
        
        .small_img ul {
            display: flex;
            justify-content: space-around;
        }
        
        .small_img ul li {
            box-sizing: border-box;
            width: 58px;
            height: 58px;
        }
        
        .small_img ul li img {
            width: 54px;
            height: 54px;
        }
        
        .small_img ul .border_color {
            border: 2px solid #f00;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="img_box">
            <ul>
                <li class="imgActive"><img src="images/pic1.jpg" alt=""></li>
                <li><img src="images/pic3.jpg" alt=""></li>
                <li><img src="images/pic5.jpg" alt=""></li>
                <li><img src="images/pic7.jpg" alt=""></li>
            </ul>
        </div>
        <div class="mask"></div>
        <div class="big_img">
            <ul>
                <li class="imgActive"><img src="images/pic2.jpg" alt=""></li>
                <li><img src="images/pic4.jpg" alt=""></li>
                <li><img src="images/pic6.jpg" alt=""></li>
                <li><img src="images/pic8.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <div class="small_img">
        <ul>
            <li class="border_color"><img src="images/pic9.jpg" alt=""></li>
            <li><img src="images/pic10.jpg" alt=""></li>
            <li><img src="images/pic11.jpg" alt=""></li>
            <li><img src="images/pic12.jpg" alt=""></li>
        </ul>
    </div>

    <script>
        let box = document.querySelector(".box");
        let imgBoxLi = box.querySelectorAll(".img_box>ul>li");
        let mask = document.querySelector(".mask");

        let big_img = document.querySelector(".big_img");
        let bigImgLi = big_img.querySelectorAll("li");

        let small_img = document.querySelector(".small_img");
        let smallImgLi = small_img.querySelectorAll("li");

        let lastIndex = 0;

        // 鼠标移入box，显示遮罩层和大图片盒子
        box.addEventListener("mouseover", function() {
            mask.style.display = "block";
            big_img.style.display = "block";
        });

        // 鼠标移出box，隐藏遮罩层和大图片盒子
        box.addEventListener("mouseleave", function() {
            mask.style.display = "none";
            big_img.style.display = "none";
        });


        // 给每个小图片添加属性num（索引值）
        imgBoxLi.forEach(function(item, idx) {
            item.setAttribute("num", idx);
        });

        // 给每个大图片添加属性num（索引值）
        bigImgLi.forEach(function(item, idx) {
            item.setAttribute("num", idx);
        });

        // 调用函数
        (function(e, i) {
            box.addEventListener("mousemove", function(e) {
                moveFn(e, 0); //调用方法
            });
        })(0);

        // 遍历最小的图片
        smallImgLi.forEach(function(item, index) {
            smallImgLi[index].addEventListener("mouseover", function() {
                // 最小图片边框切换
                smallImgLi[lastIndex].classList.remove("border_color");
                smallImgLi[index].classList.add("border_color");

                // 小图片切换
                if (imgBoxLi[index].getAttribute("num") == index) {
                    imgBoxLi[lastIndex].classList.remove("imgActive");
                    imgBoxLi[index].classList.add("imgActive");
                };

                // 大图片切换
                if (bigImgLi[index].getAttribute("num") == index) {
                    bigImgLi[lastIndex].classList.remove("imgActive");
                    bigImgLi[index].classList.add("imgActive");
                };

                lastIndex = index;

                // 调用函数
                (function(e, i) {
                    box.addEventListener("mousemove", function(e) {
                        moveFn(e, index);
                    });
                })(index);
            });
        });

        // 封装函数：遮罩层和大图片移动
        function moveFn(e, i) {
            // 遮罩层移动距离
            let x = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
            let y = e.pageY - box.offsetTop - mask.offsetHeight / 2;
            // 遮罩层移动范围
            let mask_xLimit = box.offsetWidth - mask.offsetWidth;
            let mask_yLimit = box.offsetHeight - mask.offsetHeight;
            // 把遮罩层限制在盒子内
            if (x < 0) {
                x = 0;
            } else if (x > mask_xLimit) {
                x = mask_xLimit;
            };
            if (y < 0) {
                y = 0;
            } else if (y > mask_yLimit) {
                y = mask_yLimit;
            };
            mask.style.left = x + "px";
            mask.style.top = y + "px";
            // 遮罩层移动距离    大图片移动距离
            //      /         =        /
            // 遮罩层移动范围    大图片移动范围
            // 大图片移动范围
            let bigImg_xLimit = bigImgLi[0].offsetWidth - big_img.offsetWidth;
            let bigImg_yLimit = bigImgLi[0].offsetHeight - big_img.offsetHeight;
            bigImgLi[i].style.left = -x * bigImg_xLimit / mask_xLimit + "px";
            bigImgLi[i].style.top = -y * bigImg_yLimit / mask_yLimit + "px";
        };
    </script>
</body>

</html>